<template>
  <div>
    <div class="hcon">
      <div class="left">
        <i class="el-icon-warning"></i>当前订单状态：{{orderStatus[basedata.order_status]}}
      </div>
      <div>
        <!-- <el-button size="small">修改出行人信息</el-button>
        <el-button size="small">修改搭配产品</el-button>
        <el-button size="small">修改费用信息</el-button>
        <el-button size="small">删除订单</el-button>
        <el-button size="small">关闭订单</el-button>
        <el-button size="small">备注订单</el-button> -->
      </div>
    </div>
    <div class="stepcon">
      <div>
        <el-steps :active="stepAct" align-center>
          <el-step
            v-for="item in stepList"
            :key="item.flow_name"
            :title="item.flow_name"
            :description="item.time"
          ></el-step>
        </el-steps>
      </div>
    </div>
    <div>
      <labelContent title="基本信息">
        <el-table
          class="small-table"
          :data="baseInfo"
          border
          style="width: 100%"
        >
          <el-table-column label="订单编号">
            <template slot-scope="scope">
              {{ scope.row.order_code }}
            </template>
          </el-table-column>
          <el-table-column label="下单日期">
            <template slot-scope="scope">
              {{ scope.row.init_time | formatDate("yyyy-MM-dd hh:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column label="线路名称">
            <template slot-scope="scope">
              {{ scope.row.commodity_name }}
            </template>
          </el-table-column>
          <el-table-column label="出行人数">
            <template slot-scope="scope">
              {{ scope.row.adult_user_count + scope.row.child_user_count }}
            </template>
          </el-table-column>
          <el-table-column label="出行日期">
            <template slot-scope="scope">
              {{ scope.row.trip_day }}
            </template>
          </el-table-column>
          <el-table-column label="订单来源">
            <template slot-scope="scope">
              {{ orderSource[scope.row.order_type] }}
            </template>
          </el-table-column>
        </el-table>
      </labelContent>

      <labelContent title="预定人/出行人信息">
        <div class="mb16">
          <el-table
            class="small-table"
            :data="buyUserList"
            border
            style="width: 100%"
          >
            <el-table-column label="联系人姓名">
              <template slot-scope="scope">
                {{ scope.row.buy_name }}
              </template>
            </el-table-column>
            <el-table-column label="联系人方式">
              <template slot-scope="scope">
                {{ scope.row.buy_mobilenum }}
              </template>
            </el-table-column>
            <el-table-column label="电子邮箱">
              <template slot-scope="scope">
                {{ scope.row.buy_email }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <el-table
            class="small-table"
            :data="tripUserList"
            border
            style="width: 100%"
          >
            <el-table-column label="出行人姓名">
              <template slot-scope="scope">
                {{ scope.row.trip_username }}
              </template>
            </el-table-column>
            <el-table-column label="年龄段">
              <template slot-scope="scope">
                {{ tripType[scope.row.trip_type] }}
              </template>
            </el-table-column>
            <el-table-column label="证件类型">
              <template slot-scope="scope">
                {{ certificateType[scope.row.certificate_type] }}
              </template>
            </el-table-column>
            <el-table-column label="证件号码">
              <template slot-scope="scope">
                {{ scope.row.certificate_code }}
              </template>
            </el-table-column>
            <el-table-column label="联系方式">
              <template slot-scope="scope">
                {{ scope.row.trip_phone }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </labelContent>

      <labelContent title="保险信息">
        <div>
          <el-table
            class="small-table"
            :data="insuranceList"
            border
            style="width: 100%"
          >
            <el-table-column label="保险名称">
              <template slot-scope="scope">
                {{ scope.row.insurance_name }}
              </template>
            </el-table-column>
            <el-table-column label="保险单价（元）">
              <template slot-scope="scope">
                {{ scope.row.insurance_price / 100 }}
              </template>
            </el-table-column>
            <el-table-column label="参保人数（人）">
              <template slot-scope="scope">
                {{ scope.row.buy_count }}
              </template>
            </el-table-column>
            <el-table-column label="总价（元）">
              <template slot-scope="scope">
                {{ (scope.row.insurance_price/100) * scope.row.buy_count }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </labelContent>

      <labelContent title="搭配产品">
        <div>
          <el-table
            class="small-table"
            :data="appendList"
            border
            style="width: 100%"
          >
            <el-table-column label="产品名称">
              <template slot-scope="scope">
                {{ scope.row.dp_name }}
              </template>
            </el-table-column>
            <el-table-column label="单价（元）">
              <template slot-scope="scope">
                {{ scope.row.dp_price / 100 }}
              </template>
            </el-table-column>
            <el-table-column label="份数">
              <template slot-scope="scope">
                {{ scope.row.buy_count }}
              </template>
            </el-table-column>
            <el-table-column label="总价（元）">
              <template slot-scope="scope">
                {{ (scope.row.dp_price/100) * scope.row.buy_count }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </labelContent>

      <labelContent title="支付明细">
        <div>
          <el-table
            class="small-table"
            :data="payDetailList"
            border
            style="width: 100%"
          >
            <el-table-column label="预订人姓名">
              <template slot-scope="scope">
                {{ scope.row.buy_name }}
              </template>
            </el-table-column>
            <el-table-column label="订单金额（元）">
              <template slot-scope="scope">
                {{ scope.row.original_price / 100 }}
              </template>
            </el-table-column>
            <el-table-column label="折扣金额（元）">
              <template slot-scope="scope">
                {{ scope.row.discounts_price / 100 }}
              </template>
            </el-table-column>
            <el-table-column label="会员权益（元）">
              <template slot-scope="scope">
                {{ scope.row.member_price / 100 }}
              </template>
            </el-table-column>
            <el-table-column label="优惠券金额（元）">
              <template slot-scope="scope">
                {{ scope.row.coupon_price / 100 }}
              </template>
            </el-table-column>
            <el-table-column label="应付金额（元）">
              <template slot-scope="scope">
                {{ scope.row.buying_price / 100 }}
              </template>
            </el-table-column>
            <el-table-column label="已付金额（元）">
              <template slot-scope="scope">
                {{ scope.row.payment_price / 100 }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </labelContent>

      <labelContent title="收入明细">
        <div>
          <el-table
            class="small-table"
            :data="incomeList"
            border
            style="width: 100%"
          >
            <el-table-column label="订单金额（元）">
              <template slot-scope="scope">
                {{ scope.row.original_price / 100 }}
              </template>
            </el-table-column>
            <el-table-column label="实际金额（元）">
              <template slot-scope="scope">
                {{ scope.row.buying_price / 100 }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </labelContent>
    </div>
  </div>
</template>

<script>
import orderAPI from "api/orderManagement/orderAPI";
import labelContent from "components/workComponents/labelContent";
import { order_source, certificate_type, trip_type, order_status } from "common/config/constConfig";
import formatDate from 'common/js/date'

export default {
  components: {
    labelContent,
  },
  data() {
    return {
      stepAct: 1,
      orderSource: order_source,
      certificateType: certificate_type,
      tripType: trip_type,
      orderStatus: order_status,
      basedata: {},
      stepList: [
        // { title: "提交订单", description: "2020-02-2" },
        // { title: "支付订单", description: "未支付" },
        // { title: "确认出行", description: "" },
        // { title: "完成", description: "" },
      ],
      baseInfo: [],
      buyUserList: [],
      appendList: [],
      insuranceList: [],
      tripUserList: [],
      payDetailList: [],
      incomeList: []
    };
  },
  methods: {
    // 改变步骤跳
    changeStep(data) {
      let arr = data.flow_info || []
      arr.map(item => ({
        ...item,
        time: formatDate(item.time)
      }))
      let index = 0
      arr.forEach(item => {
        if(item.enable==1) index++
      })
      this.stepAct = index
      this.stepList = arr
      
      // if(data.order_status===0) {
      //   this.stepAct = 1
      // }else if(data.order_status===2 && data.is_affirm===0) {
      //   // 待确认出行
      //   this.stepAct = 2
      // }else if(data.order_status===2 && data.is_affirm===1) {
      //   // 已确认出行
      //   this.stepAct = 3
      // }else if(data.order_status===4 || data.is_affirm===5) {
      //   // 已完成
      //   this.stepAct = 4
      // }else if(data.order_status === 9){
      //   this.stepList = [
      //     { title: "取消订单"}
      //   ]
      // }
    },
    // 获取订单详情
    async getDetail() {
      let res = await orderAPI('detail', {order_id: this.curid})
      console.log(res)
      let data = res.rData[0]
      // 
      this.changeStep(data)
      let {
        order_code,
        order_status,
        init_time,
        buy_email,
        buy_name,
        buy_mobilenum,
        commodity_name,
        child_user_count,
        adult_user_count,
        trip_day,
        tripUserList,
        insuranceList,
        appendList,
        original_price,
        discounts_price,
        member_price,
        coupon_price,
        payment_price,
        buying_price
      } = data
      this.basedata = {order_status}
      this.baseInfo = [{order_code,
        init_time,
        commodity_name,
        child_user_count,
        adult_user_count,
        trip_day}]
      this.buyUserList = [{
        buy_email,
        buy_name,
        buy_mobilenum
      }]
      this.tripUserList = tripUserList
      this.insuranceList = insuranceList
      this.appendList = appendList
      this.payDetailList = [{
        buy_name,
        original_price,
        discounts_price,
        member_price,
        coupon_price,
        payment_price,
        buying_price
      }]
      this.incomeList = [{
        original_price,
        buying_price
      }]
    }
  },
  created() {
    if(this.$route.query.id) {
      this.curid = this.$route.query.id
      this.getDetail()
    }
  }
};
</script>

<style lang="scss" scoped>
.hcon {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // background: #f5f5f5;
  .left {
    color: rgb(240, 72, 68);
  }
}
.stepcon {
  padding: 30px 0;
}
</style>
